{% extends 'ApplicationBootstrapBundle::layout.html.twig' %}

{% block title %}Sticky Footer and Fixed Top Navbar Example for Bootstrap{% endblock %}

{% block layoutstyle %}
    <link href="{{ asset('bundles/applicationbootstrap/css/examples/navbar_fixed_sticky_footer.css') }}" rel="stylesheet" type="text/css" media="all" />
{% endblock %}

{% block stylesheets %}
    <link href="{{ asset('bundles/applicationbootstrap/css/fonts/font-awesome/font-awesome.css') }}" rel="stylesheet" type="text/css" media="all" />
    <link href="{{ asset('bundles/applicationbootstrap/css/forms/datetimepicker/bootstrap-datetimepicker.css') }}" rel="stylesheet" type="text/css" media="all" />
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('bundles/applicationbootstrap/js/forms/datetimepicker/moment.js') }}" type="text/javascript"></script>
    <script src="{{ asset('bundles/applicationbootstrap/js/forms/datetimepicker/bootstrap-datetimepicker.js') }}" type="text/javascript"></script>
{% endblock %}

{% block navigation %}
    <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
        
            {% include 'ApplicationBootstrapBundle::_navbar.html.twig' %}
        
        </div>
    </nav>
{% endblock %}

{% block body %}
    <div class="container">
        <div class="page-header">
          <h1>Bootstrap datetimepicker</h1>
        </div>
        <div class="row">
            <div class="col-lg-6">
                <form role="form">
                
        			<div class="form-group">
        				<h4>Example Button</h4>
                        <div class="input-group" id="datetimepicker_btn">
                            <span class="input-group-btn">
                                <button class="btn btn-info btn-flat" type="button"><i class="fa fa-calendar"></i></button>
                            </span>
                            <input type="text" class="form-control">
                        </div><!-- /input-group -->
        			</div>
			        <script type="text/javascript">
			            $(document).ready(function() {
			                $('#datetimepicker_btn').datetimepicker({
			                	defaultDate: new Date(),
			                	format: 'DD/MM/YYYY HH:mm'
				            });
			            });
			        </script>
                
		            <div class="form-group">
		                <h4>Example 1 - Basic datetime</h4>
		                <input type='text' class="form-control" id="datetimepicker1">
		            </div>
			        <script type="text/javascript">
			            $(document).ready(function() {
			                $('#datetimepicker1').datetimepicker({
			                	defaultDate: new Date()
				            });
			            });
			        </script>
                
		            <div class="form-group">
		            	<h4>Example 2 - Basic date</h4>
		                <div class="input-group">
		                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
		                    <input type="text" class="form-control" id="datetimepicker2">
		                </div>
		            </div>
			        <script type="text/javascript">
			            $(document).ready(function() {
			                $('#datetimepicker2').datetimepicker({
			                	pickTime: false,
			                	format: 'DD/MM/YYYY'
				            });
			            });
			        </script>
			        
		            <div class="form-group">
		                <h4>Example 3 - Basic time</h4>
		                <div class="input-group" >
		                    <span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
		                    <input type='text' class="form-control" id="datetimepicker3">
		                </div>
		            </div>
			        <script type="text/javascript">
			            $(document).ready(function() {
			                $('#datetimepicker3').datetimepicker({
			                    pickDate: false,
			                    format: 'HH:mm'
			                });
			            });
			        </script>
			        
		            <div class="form-group">
		            	<h4>Example 4 - Custom Icons (Font Awesome)</h4>
		            	<p><code>data-date-format="YYYY/MM/DD HH:mm"</code></p>
		                <div class="input-group">
		                    <span class="input-group-addon"><i class="fa fa-calendar"></i> <i class="fa fa-clock-o"></i></span>
		                    <input type="text" class="form-control" id="datetimepicker4"  data-date-format="YYYY/MM/DD HH:mm">
		                </div>
		            </div>
			        <script type="text/javascript">
			            $(document).ready(function() {
			                $('#datetimepicker4').datetimepicker({
			                	icons: {
			                        time: "fa fa-clock-o",
			                        date: "fa fa-calendar",
			                        up: "fa fa-arrow-up",
			                        down: "fa fa-arrow-down"
			                    },
			                    format: 'HH:mm'
				            });
			            });
			        </script>
			        
		            <div class="form-group">
		                <h4>Events and linked pickers</h4>
		                <div class="row">
			                <div class="col-md-6">
				                <div class="input-group">
				                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
				                    <input type='text' class="form-control" id="datetime_from">
				                </div>
			                </div>
			                <div class="col-md-6">
				                <div class="input-group">
				                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
				                    <input type='text' class="form-control" id="datetime_to">
				                </div>
			                </div>
		                </div>
		            </div>
			        <script type="text/javascript">
			            $(document).ready(function() {
				            
			                $('#datetime_from').datetimepicker({
			                    format: 'DD/MM/YYYY HH:mm'
			                });
			                $('#datetime_to').datetimepicker({
			                    format: 'DD/MM/YYYY HH:mm'
			                });

			                $("#datetime_from").on("dp.change",function (e) {
			                   $('#datetime_to').data("DateTimePicker").setMinDate(e.date);
			                });
			                $("#datetime_to").on("dp.change",function (e) {
			                   $('#datetimepicker_from').data("DateTimePicker").setMaxDate(e.date);
			                });
			                
			            });
			        </script>
        			
        		</form>
            </div>
        </div>
    </div> <!-- /container -->
{% endblock %}